<template>

	<view class="warp-zhenggfk">
		<u-form ref="uForm">
			<u-form-item :border-bottom="borderBottom" >
				<view class="inner">
				
					<view class="group-title">
						<view>位置描述</view>
						<view class="btn">周边单位</view>
						
					</view>
					
					<u-input v-model="form.wanggwz" type="text" border="true" placeholder="网格位置" />
				</view>	
		</u-form-item>
		<view class="map-box">
			<map style="width: 100%;height: 100%;" :latitude="mapSection.latitude" :longitude="mapSection.longitude"
			 :markers="mapSection.covers"></map>
		</view>
			
		</u-form>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				borderBottom: false,
				customStyle: {
					background: '#409eff',
					color: '#fff',
					marginTop: '20rpx'
				},
				mapSection: {
					id: 0, // 使用 marker点击事件 需要填写id
					title: 'map',
					latitude: 39.909,
					longitude: 116.39742,
					covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../../static/location.png'
					}, {
						latitude: 39.90,
						longitude: 116.39,
						iconPath: '../../../static/location.png'
					}]
				}
			}
		},
		methods: {
			
		}

	}
</script>

<style>
	page{
		padding:0;
	}
	.warp-zhenggfk {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	.inner{
		padding:0 30rpx;
		width: 100%;
	}
	.zhenggfk-upload {
		width: 100%;
		height: auto;
	}

	.group-title {
		font-size: 32rpx;
		color: rgb(3, 169, 244);
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.btn{
		padding:10rpx 30rpx;
		background-color: rgb(3, 169, 244);
		color:#fff;
		font-size: 28rpx;
		border-radius: 10rpx;
	}
	.map-box {
		width: 100%;
		height:calc(100vh - 220rpx);
		margin-top: 20rpx;
	}
	.weizjshjms-bar{
		display: flex;
		justify-content: space-between;
	}
	.weizjshjms-input{
		width: 70%;
	}
	.tdxz-btn button{
		margin-top: 0 !important;
	}
</style>